<template>
  <Scroll ref="scroll" key="all" :data="list">
    <div>
      <ul class="settingEdit-allList">
        <goodsItem
          :img="item.imgpath"
          :title="item.name"
          :note="item.sellerpoints"
          :price="item.shop_price"
          :id="item.id"
          :type="3"
          class="settingEdit-allItem"
          @add="selectItem(item)"
          @reduce="unSelectItem(item.id)"
          v-for="item in list"
          :selected="_JugeList(item.id)"
          :key="item.id">
        </goodsItem>
      </ul>
      <div class="settingEdit-allList-paginate" id="listBox-paginate">
        <Paginate v-if="maxpage >= 2 && list.length > 0" :click-handler="goHref" ref="paginate" :margin-pages="1"
                  :page-count="maxpage" :containerClass="'pagination pagination-sm'" :prev-text="'<'"
                  :next-text="'>'">
        </Paginate>
      </div>
    </div>

    <div v-transfer-dom>
      <x-dialog :show.sync="filterBox.state" :hide-on-blur="true">
        <div class="settingEdit-filterBox">

          <div class="settingEdit-filterBox-title">
            筛选
          </div>

          <div class="settingEdit-filterBox-box">

            <div class="settingEdit-filterBox-box-left">
              名称:
            </div>

            <div class="settingEdit-filterBox-box-right">
              <input type="text" v-model="filterBox.text">
            </div>

          </div>

          <div class="settingEdit-filterBox-box">

            <div class="settingEdit-filterBox-box-left">
              分类:
            </div>

            <div class="settingEdit-filterBox-box-right">
              <select v-model="filterBox.selected">
                <option value="-1">
                  全部
                </option>
                <option :value="item.id" v-for="item in goodsTypes.list">
                  {{item.name}}
                </option>
              </select>
            </div>

          </div>

          <div class="settingEdit-filterBox-box">

            <div class="box-button" @click="onfilterBoxClick">
              确定
            </div>

          </div>

        </div>
      </x-dialog>
    </div>
  </Scroll>
</template>
<script>
  import Scroll from "base/scroll/scroll";
  import Bus from "common/js/bus";
  import {mapGetters, mapMutations, mapActions} from "vuex";
  import goodsItem from "base/goodsItem/goodsItem"
  import Paginate from 'vuejs-paginate';
  import {XDialog, TransferDomDirective as TransferDom, XButton} from 'vux'
  import {getEditAllList, getEditSelectList, uploadSelectedlist, searchWord} from "api/setting"
  import _ from "lodash";

  export default {
    props: {
      data: {
        type: Object,
        default: () => {
          return {}
        },
      }
    },
    data() {
      return {
        list: [],
        maxpage: 1,
        filterBox: {
          state: false,
          text: "",
          selected: ""
        },
      }
    },
    computed: {...mapGetters(['user_phone', 'setting_selectedlist', 'user_id', 'goodsTypes', 'header_filter'])},
    methods: {
      upLoadSelectedList() {
        Bus.$emit("loading-on");
        let Ids = "";
        _.each(this.setting_selectedlist, (item) => {
          Ids += `,${item.id}`
        });
        uploadSelectedlist({goods_id: Ids.substr(1), uid: this.user_id}).then((Rs) => {
//                console.log(Rs)
          Bus.$emit("loading-off");
        });
      },
      goHref(page) {
        if(this.filterBox.text === "" && this.filterBox.selected === -1){
          this._getEditAllList(page, true);
        }else{
           this._searchWord(page);
        }
      },
      selectItem(item) {
        this.settingEditAddItem(item);
        this.upLoadSelectedList();
      },
      unSelectItem(id) {
        this.settingEditReduceItem(id);
        this.upLoadSelectedList();
      },
      _getEditAllList(p = 1, init = false) {
        Bus.$emit("loading-on");
        getEditAllList({uid: this.user_id, p}).then((Rs, Rs1) => {
          this.list = Rs[0].data;
          this.maxpage = Math.ceil(Rs[0].total / Rs[0].per_page);
          !init ? this.setSettingSelectedlist(Rs1[0].data) : null;
          Bus.$emit("loading-off");
        }).catch(err => {
          Bus.$emit("loading-off");
          this.$router.push("/setting")
        })
      },
      _searchWord(p = 1) {
        Bus.$emit("loading-on");
        this.filterBox.text ? searchWord({
          text: this.filterBox.text,
          cate: this.filterBox.selected,
          page: p,
          uid: this.user_id
        }).then((Rs) => {
          this.list = Rs.data;
          this.maxpage = Math.ceil(Rs.total / Rs.per_page);
          Bus.$emit("loading-off");
        }) : this._getEditAllList();
      },
      _JugeList(id) {
        return !_.find(this.setting_selectedlist, {id});
      },
      onfilterBoxClick() {
        //姓名不能为空
        this.filterBox.state = false;
        this._searchWord();
      },
      ...mapMutations({
        "setSettingSelectedlist": "SET_SETTING_SELECTEDLIST",
        "setCommonHeader": "SET_COMMON_HEADER"
      }),
      ...mapActions(['settingEditAddItem', 'settingEditReduceItem'])
    },
    components: {goodsItem, Scroll, Paginate, XDialog},
    mounted() {
      this._getEditAllList();
    },
    activated() {
      this.$emit('pageLoaded');
      this.setCommonHeader(5);
    },
    deactivated() {

    },
    watch: {
      'header_filter': function () {
        this.filterBox.state = true;
      },
    },
    directives: {
      TransferDom
    }
  }
</script>
<style lang="less">
  .settingEdit-allList {
    padding-top: 95px;
  }

  .settingEdit-allList-paginate {
    text-align: center;
  }
</style>
